import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Platform,
    InteractionManager
} from 'react-native';

import Echarts from 'native-echarts';
import Dimensions from 'Dimensions';
const {width} = Dimensions.get('window');
import {connect} from "react-redux";
class Chart extends Component {
    constructor(props) {
        super(props);
        this.height =200;
        this.width = Dimensions.get('window').width;
        this.dataX = [0];/*X轴数据*/
        this.dataY = [0];/*Y轴数据*/
        this.state = {
            reset: true
        };
    }
    componentWillUpdate(nextProps, nextState) {
        InteractionManager.runAfterInteractions(() => {
            const {UserReducer, dispatch} = nextProps;
            if (UserReducer.D_QueryBusiness_IsRefreshing) {
                dispatch({type: 'Complete', D_QueryBusiness_IsRefreshing: false});
                this.dataX = this.props.dataX || ['04-11', '04-12', '04-13', '04-14', '04-15', '04-16', '04-17'];
                this.dataY = this.props.dataY || [1450, 1300, 1400, 350, 850, 1150, 650];
                this.setOption();
            }
        });
    }
    render() {
        return (
            <View style={styles.container}>
                <Echarts option={this.option} height={this.props.height || this.height} width={this.props.width || this.width}/>
            </View>
        );
    }

    componentWillMount() {
        this.dataX = this.props.dataX || ['04-11', '04-12', '04-13', '04-14', '04-15', '04-16', '04-17'];
        this.dataY = this.props.dataY || [1450, 1300, 1400, 350, 850, 1150, 650];
        this.setOption();
    }

    setOption() {
        const dataX = [];
        this.dataX.map((data, index) => {
            align = 'center';
            if (0 == index) {
                align = 'left';
            }
            else if (this.dataX.length - 1 == index) {
                align = 'right';
            }

            let temp = {
                value: data,
                textStyle:{
                    align : align
                }
            };
            dataX.push(temp);
        });

        this.option = {
            tooltip : {//提示框
                trigger: 'axis',
            },

            xAxis : [{
                data : dataX,
                boundaryGap: false,
                axisTick: {show: false},
                axisLine: {show: false},//坐标线
                axisLabel: {
                    textStyle: {
                        fontSize: 10,
                    }
                }
            }],

            yAxis : [{
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    inside: true,/*文字内衬*/
                    formatter: '{value}',/*格式化显示*/
                    margin: 0,
                    textStyle: {
                        fontSize: 10,
                    }
                },
                splitLine: {           // 分隔线
                    show: true,
                    lineStyle: {
                        width: 1,
                        type: 'dotted'/*虚线*/
                    }
                },
                z: 10,
            }],

            grid: {//表格格式
                top: '8%',
                bottom: '10',
                left: '10',
                right: '10',
                containLabel: true,
                color:'rgba(255,255,0,1)'
            },

            series: [{//内容设置
                type: 'line',//折线图
                smooth: true,//抗锯齿
                name: '营业额',
                itemStyle: {normal: {color: 'rgb(34, 203, 134)', borderColor: 'rgba(34, 203, 134, 0.5)', borderWidth:8}},//标注点格式
                areaStyle: {normal: {color: 'rgb(155, 232, 200)'}},//区域格式
                lineStyle: {normal: {color: 'rgb(34, 203, 134)'}},//折线格式
                data: this.dataY,
                symbol: 'circle',//标注点类型
                symbolSize: 8,
                showSymbol: false,
                hoverAnimation: false,//标注点展示方式
            }]
        }

        this.setState({
            reset: true
        });
    }
}

const styles = StyleSheet.create({
    container: {
    }
});

export default connect((state) => {
    return {UserReducer} = state;
})(Chart);